<template>
    <h2>借阅图书</h2>
    <br>  
    <div class="form">
      <el-form
        :model="borrow"
        status-icon
        class="demo-ruleForm"
      >
        <el-form-item label="借阅证号">
          <el-input class="input" v-model="borrow.data.ReaderID" autocomplete="off" />
        </el-form-item>
        <el-form-item class="input" label="图书ISBN">
          <el-input
            v-model="borrow.data.ISBN"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="借阅数量">
          <el-input-number v-model.number="borrow.num" :min='1' />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmBorrow(borrow)"
            >借阅</el-button
          >
          <el-button  @click="reset"
            >重置</el-button
          >
        </el-form-item>
    </el-form>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import BookService from "../../stores/BookService";

const borrow = reactive({
    data:{
      ReaderID: '',
      ISBN: '',
    },
    num: 1
})

const confirmBorrow =async (brw) => {

  const [err, res] = await BookService.promise_process(BookService.lendBook(brw.num, brw.data))
    if(err){
      console.log(err)
      ElMessageBox.alert("请求服务器失败", '提示', {
          type : 'error',
          confirmButtonText: 'OK',
      })
    }
    if(res){
        if(res.msg == '借阅成功！'){
        ElMessage({
          message: "借阅成功",
          type: "success",
        });
        reset()
      }else{
         ElMessage({
          message: res.msg,
          type: "warning",
        });
    }
  }
}

const reset = () =>{
  borrow.data.ISBN = ''
  borrow.data.ReaderID = ''
}

</script>

<style scoped>
.search {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  text-align: left;
}
.page {
  position: absolute;
  left: 50%;
}
  .form {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  text-align:left; margin: 0 auto;width:50%;
}
.input {
  width: 80%
}
</style>